import "../../../node_modules/leaflet/dist/leaflet.css";
import React, { useEffect, useRef, useState } from "react";
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import 'leaflet.animatedmarker/src/AnimatedMarker'
import "leaflet.markercluster";

import 'leaflet-trackplayer'
import "leaflet.markercluster/dist/MarkerCluster.css";
import "leaflet.markercluster/dist/MarkerCluster.Default.css";
import 'leaflet-polylinedecorator';
import leafGreen from "../../assets/img/leaf-green.png"
// ck.png
import ck from "../../assets/assets/ck.png"
import start from "../../assets/assets/start.png"
import end from "../../assets/assets/end.png"
import shipIconActive from "../../assets/assets/supply/shipIconActive.png"
import './index.scss'
const key = "03cd4b8189df52cc8fba3d9fd345f747";

// import addressPoints from './data'

export default function Index() {
  const mapRef = useRef(null);
  let path1 = [
    {
      lat: 34.25615548523744,
      lng: 108.91164044842363,
    },
    {
      lat: 34.256155386830855,
      lng: 108.91179023713374,
    },
    {
      lat: 34.256155386830855,
      lng: 108.91179023713374,
    },
    {
      lat: 34.25607942383744,
      lng: 108.91177925878043,
    },
    {
      lat: 34.255720609670156,
      lng: 108.91171038494707,
    },
    {
      lat: 34.255607664345405,
      lng: 108.91169441655762,
    },
    {
      lat: 34.25553269366626,
      lng: 108.91169442258713,
    },
    {
      lat: 34.25544769867856,
      lng: 108.91173736885014,
    },
    {
      lat: 34.25544769867856,
      lng: 108.91173736885014,
    },
    {
      lat: 34.25541482067108,
      lng: 108.91157060617357,
    },
    {
      lat: 34.255437230925885,
      lng: 108.91091151687152,
    },
    {
      lat: 34.2554647726071,
      lng: 108.90999074936826,
    },
    {
      lat: 34.255474922592086,
      lng: 108.90972209999609,
    },
    {
      lat: 34.255470035735925,
      lng: 108.90952435653506,
    },
    {
      lat: 34.25546585239153,
      lng: 108.90796530095042,
    },
    {
      lat: 34.255466079902156,
      lng: 108.90748786950532,
    },
    {
      lat: 34.255466139078585,
      lng: 108.90736001962813,
    },
    {
      lat: 34.25546047844199,
      lng: 108.90659889522819,
    },
    {
      lat: 34.25545553696015,
      lng: 108.90646504623344,
    },
    {
      lat: 34.255455684520776,
      lng: 108.90610644487133,
    },
    {
      lat: 34.25543990484673,
      lng: 108.90555904106137,
    },
    {
      lat: 34.255434929044085,
      lng: 108.90550010453336,
    },
    {
      lat: 34.25671044153241,
      lng: 108.90546803620235,
    },
    {
      lat: 34.256994331993134,
      lng: 108.9054630187248,
    },
    {
      lat: 34.2573861821876,
      lng: 108.90545199896282,
    },
    {
      lat: 34.2583997892619,
      lng: 108.90543593456538,
    },
    {
      lat: 34.25896857276571,
      lng: 108.90541491120209,
    },
    {
      lat: 34.2600241555513,
      lng: 108.90541482639716,
    },
    {
      lat: 34.26038901329847,
      lng: 108.9054088034598,
    },
    {
      lat: 34.260957801498556,
      lng: 108.9053717970368,
    },
    {
      lat: 34.261048767618306,
      lng: 108.90536579609017,
    },
    {
      lat: 34.26174549083055,
      lng: 108.90536574011179,
    },
    {
      lat: 34.262888033588865,
      lng: 108.9053716419483,
    },
    {
      lat: 34.263321862668384,
      lng: 108.90536561345179,
    },
    {
      lat: 34.26381066919356,
      lng: 108.90536057947523,
    },
    {
      lat: 34.264314469827035,
      lng: 108.90535454535133,
    },
    {
      lat: 34.264416428997436,
      lng: 108.90535453715839,
    },
    {
      lat: 34.264545377344014,
      lng: 108.90535452679667,
    },
    {
      lat: 34.26485025108296,
      lng: 108.90536549063917,
    },
    {
      lat: 34.26494221420379,
      lng: 108.90536548324928,
    },
    {
      lat: 34.265745895588346,
      lng: 108.9053544303257,
    },
    {
      lat: 34.26596581086138,
      lng: 108.90534442324677,
    },
    {
      lat: 34.2664006399377,
      lng: 108.90533339995,
    },
    {
      lat: 34.26711335674291,
      lng: 108.90532235431407,
    },
    {
      lat: 34.267682127119045,
      lng: 108.90532230860484,
    },
    {
      lat: 34.267977007932025,
      lng: 108.90532228490632,
    },
    {
      lat: 34.26842182796332,
      lng: 108.90532224915717,
    },
    {
      lat: 34.26893662309246,
      lng: 108.90531221835984,
    },
    {
      lat: 34.26961734908727,
      lng: 108.90530616999233,
    },
    {
      lat: 34.27079687296456,
      lng: 108.90529608575685,
    },
    {
      lat: 34.27079687296456,
      lng: 108.90529608575685,
    },
    {
      lat: 34.270796835711245,
      lng: 108.90539697877264,
    },
    {
      lat: 34.27080243135706,
      lng: 108.90641586657812,
    },
    {
      lat: 34.270802076591195,
      lng: 108.9072299373526,
    },
    {
      lat: 34.270812817234265,
      lng: 108.90777629238795,
    },
    {
      lat: 34.270822675023936,
      lng: 108.90806094950152,
    },
    {
      lat: 34.27082259586891,
      lng: 108.90822075550248,
    },
    {
      lat: 34.27082849640933,
      lng: 108.9084135191401,
    },
    {
      lat: 34.27083332877497,
      lng: 108.90873512064815,
    },
    {
      lat: 34.27083823372032,
      lng: 108.90891189899708,
    },
    {
      lat: 34.270843970260856,
      lng: 108.9093942860198,
    },
    {
      lat: 34.270843671165785,
      lng: 108.90992459787954,
    },
    {
      lat: 34.27084322644142,
      lng: 108.91067459821011,
    },
    {
      lat: 34.270842940218785,
      lng: 108.91113596785353,
    },
    {
      lat: 34.270842859216124,
      lng: 108.91126379113685,
    },
    {
      lat: 34.270847625398574,
      lng: 108.91162328889843,
    },
    {
      lat: 34.27084755144006,
      lng: 108.91173612991112,
    },
    {
      lat: 34.27085335722669,
      lng: 108.91202471962777,
    },
    {
      lat: 34.270852784122816,
      lng: 108.9128555142759,
    },
    {
      lat: 34.27085267748,
      lng: 108.91300529292631,
    },
    {
      lat: 34.27085254672574,
      lng: 108.91318702269936,
    },
    {
      lat: 34.27085205628723,
      lng: 108.91385101989933,
    },
    {
      lat: 34.27087119213721,
      lng: 108.91615435172467,
    },
    {
      lat: 34.27087566746897,
      lng: 108.91675434843464,
    },
    {
      lat: 34.2708814553737,
      lng: 108.91698994875553,
    },
    {
      lat: 34.27085429757733,
      lng: 108.9171776307563,
    },
    {
      lat: 34.27080602434836,
      lng: 108.91749908177066,
    },
    {
      lat: 34.27080602434836,
      lng: 108.91749908177066,
    },
    {
      lat: 34.270751948023054,
      lng: 108.91760590116054,
    },
    {
      lat: 34.27073590010758,
      lng: 108.9176648001958,
    },
    {
      lat: 34.270708807347326,
      lng: 108.91777660774166,
    },
    {
      lat: 34.27070375357,
      lng: 108.91783650359831,
    },
    {
      lat: 34.270708656282736,
      lng: 108.91793832501797,
    },
    {
      lat: 34.27073056759363,
      lng: 108.91802317433239,
    },
    {
      lat: 34.270778426427114,
      lng: 108.91815194371763,
    },
    {
      lat: 34.27082633013241,
      lng: 108.91823279701194,
    },
    {
      lat: 34.27090620143976,
      lng: 108.91833361195992,
    },
    {
      lat: 34.27096613594049,
      lng: 108.91837653091702,
    },
    {
      lat: 34.27103006872475,
      lng: 108.91841944945133,
    },
    {
      lat: 34.271094016769126,
      lng: 108.91844639632818,
    },
    {
      lat: 34.27115297737252,
      lng: 108.91846236313094,
    },
    {
      lat: 34.27124992726748,
      lng: 108.91847333575198,
    },
    {
      lat: 34.271362907088765,
      lng: 108.91844637465212,
    },
    {
      lat: 34.27141590080522,
      lng: 108.9184303988106,
    },
    {
      lat: 34.27146990941202,
      lng: 108.91839845127609,
    },
    {
      lat: 34.271506924906745,
      lng: 108.91836650505593,
    },
    {
      lat: 34.27161499324317,
      lng: 108.91824870518059,
    },
    {
      lat: 34.27165204453143,
      lng: 108.91817882572266,
    },
    {
      lat: 34.27169010556983,
      lng: 108.91809796526304,
    },
    {
      lat: 34.27170014671252,
      lng: 108.91805004879423,
    },
    {
      lat: 34.27170014671252,
      lng: 108.91805004879423,
    },
    {
      lat: 34.271813130666544,
      lng: 108.91801809584462,
    },
    {
      lat: 34.271926114560934,
      lng: 108.91798614283951,
    },
    {
      lat: 34.27202208565869,
      lng: 108.91797515437597,
    },
    {
      lat: 34.27211304847173,
      lng: 108.91797514704386,
    },
    {
      lat: 34.27364144760009,
      lng: 108.91794807112001,
    },
    {
      lat: 34.27430117651852,
      lng: 108.91794801793834,
    },
    {
      lat: 34.27430117651852,
      lng: 108.91794801793834,
    },
    {
      lat: 34.27452116643137,
      lng: 108.91786215053015,
    },
    {
      lat: 34.27504196130342,
      lng: 108.91785212600149,
    },
    {
      lat: 34.275856640147865,
      lng: 108.91783608824171,
    },
    {
      lat: 34.27635543402423,
      lng: 108.91783604803085,
    },
    {
      lat: 34.27635543402423,
      lng: 108.91783604803085,
    },
    {
      lat: 34.277267066837524,
      lng: 108.91782499372012,
    },
    {
      lat: 34.27870948266951,
      lng: 108.91780890532164,
    },
    {
      lat: 34.27895038797587,
      lng: 108.91780289635481,
    },
    {
      lat: 34.2793632206358,
      lng: 108.91779787178181,
    },
    {
      lat: 34.28040878884263,
      lng: 108.91779279619023,
    },
    {
      lat: 34.28146034867298,
      lng: 108.91779271140113,
    },
    {
      lat: 34.28146034867298,
      lng: 108.91779271140113,
    },
    {
      lat: 34.28263387644584,
      lng: 108.91777065508535,
    },
    {
      lat: 34.28417326218677,
      lng: 108.91773359532593,
    },
    {
      lat: 34.28442516136318,
      lng: 108.91772758544468,
    },
    {
      lat: 34.28569565334534,
      lng: 108.91769553859388,
    },
    {
      lat: 34.28609849266868,
      lng: 108.9176845252085,
    },
    {
      lat: 34.28774477772293,
      lng: 108.91770036464814,
    },
    {
      lat: 34.289932847077175,
      lng: 108.91769519685113,
    },
    {
      lat: 34.29036166314886,
      lng: 108.91769516226238,
    },
    {
      lat: 34.29064054341951,
      lng: 108.91769513976726,
    },
    {
      lat: 34.291648114741015,
      lng: 108.91769006717632,
    },
    {
      lat: 34.29183603934873,
      lng: 108.91768406243645,
    },
    {
      lat: 34.29314945213906,
      lng: 108.91770591827063,
    },
    {
      lat: 34.293712204034165,
      lng: 108.9177108641832,
    },
    {
      lat: 34.294226985630914,
      lng: 108.91770583134237,
    },
    {
      lat: 34.29428596006031,
      lng: 108.9177058265846,
    },
    {
      lat: 34.29436110539907,
      lng: 108.9175131548741,
    },
    {
      lat: 34.29435643485554,
      lng: 108.91715377349566,
    },
    {
      lat: 34.29435732039652,
      lng: 108.916147466944,
    },
    {
      lat: 34.29435732039652,
      lng: 108.916147466944,
    },
    {
      lat: 34.294572232299814,
      lng: 108.91614145952745,
    },
    {
      lat: 34.29463620453703,
      lng: 108.91614145436851,
    },
    {
      lat: 34.29495306695566,
      lng: 108.91614142881548,
    },
    {
      lat: 34.29495306695566,
      lng: 108.91614142881548,
    },
    {
      lat: 34.29496736180883,
      lng: 108.91578701078069,
    },
  ];
  const data = {
    duration: '45424',
    zoneList: [],
    listCheck: [
      {
        deviceId: '1354966',
        online: true,
        driving: false,
        lat: '22.784365',
        lng: '113.49106',
        address: null,
        status: "[0,0,0,3]",
        statusStr: "启动怠速,油路通,电路通(GPS定位)",
        baseStation: null,
        alarm: "无",
        speed: 0,
        direction: 0,
        directionStr: "正北",
        gpsTime: "2024-09-03 11:19:00",
        updateTime: "2024-09-03 11:19:15",
        stopTime: "0",
        companyGroupId: null,
        position: true
      },
      {
        deviceId: 1354966,
        online: true,
        driving: false,
        lat: 22.784214,
        lng: 113.49125,
        address: null,
        status: "[0,0,0,3]",
        statusStr: "启动行驶,油路通,电路通(GPS定位)",
        baseStation: null,
        alarm: "无",
        speed: 4,
        direction: 130,
        directionStr: "南偏东 50 度",
        gpsTime: "2024-09-03 11:20:59",
        updateTime: "2024-09-03 11:21:00",
        stopTime: "0",
        companyGroupId: null,
        position: true
      },
      {
        deviceId: 1354966,
        online: true,
        driving: false,
        lat: 22.784142,
        lng: 113.49135,
        address: null,
        status: "[0,0,0,3]",
        statusStr: "启动行驶,油路通,电路通(GPS定位)",
        baseStation: null,
        alarm: "无",
        speed: 5,
        direction: 124,
        directionStr: "南偏东 56 度",
        gpsTime: "2024-09-03 11:21:05",
        updateTime: "2024-09-03 11:21:05",
        stopTime: "0",
        companyGroupId: null,
        position: true
      },
      {
        deviceId: 1354966,
        online: true,
        driving: false,
        lat: 22.784042,
        lng: 113.49147,
        address: null,
        status: "[0,0,0,3]",
        statusStr: "启动行驶,油路通,电路通(GPS定位)",
        baseStation: null,
        alarm: "无",
        speed: 5,
        direction: 163,
        directionStr: "东偏南 17 度",
        gpsTime: "2024-09-03 11:21:20",
        updateTime: "2024-09-03 11:21:20",
        stopTime: "0",
        companyGroupId: null,
        position: true
      },
      {
        deviceId: 1354966,
        online: true,
        driving: false,
        lat: 22.78402,
        lng: 113.49147,
        address: null,
        status: "[0,0,0,3]",
        statusStr: "启动行驶,油路通,电路通(GPS定位)",
        baseStation: null,
        alarm: "无",
        speed: 5,
        direction: 198,
        directionStr: "南偏西 72 度",
        gpsTime: "2024-09-03 11:21:22",
        updateTime: "2024-09-03 11:21:22",
        stopTime: "0",
        companyGroupId: null,
        position: true
      },
      {
        deviceId: 1354966,
        online: true,
        driving: false,
        lat: 22.783995,
        lng: 113.49146,
        address: null,
        status: "[0,0,0,3]",
        statusStr: "启动行驶,油路通,电路通(GPS定位)",
        baseStation: null,
        alarm: "无",
        speed: 5,
        direction: 213,
        directionStr: "南偏西 57 度",
        gpsTime: "2024-09-03 11:21:24",
        updateTime: "2024-09-03 11:21:24",
        stopTime: "0",
        companyGroupId: null,
        position: true
      },
      {
        deviceId: 1354966,
        online: true,
        driving: false,
        lat: 22.78352,
        lng: 113.49116,
        address: null,
        status: "[0,0,0,3]",
        statusStr: "启动行驶,油路通,电路通(GPS定位)",
        baseStation: null,
        alarm: "无",
        speed: 8,
        direction: 213,
        directionStr: "南偏西 57 度",
        gpsTime: "2024-09-03 11:21:53",
        updateTime: "2024-09-03 11:21:54",
        stopTime: "0",
        companyGroupId: null,
        position: true
      },
      {
        deviceId: 1354966,
        online: true,
        driving: false,
        lat: 22.78345,
        lng: 113.4911,
        address: null,
        status: "[0,0,0,3]",
        statusStr: "启动行驶,油路通,电路通(GPS定位)",
        baseStation: null,
        alarm: "无",
        speed: 5,
        direction: 233,
        directionStr: "西偏南 37 度",
        gpsTime: "2024-09-03 11:21:59",
        updateTime: "2024-09-03 11:21:59",
        stopTime: "0",
        companyGroupId: null,
        position: true
      },
      {
        deviceId: 1354966,
        online: true,
        driving: false,
        lat: 22.783442,
        lng: 113.49108,
        address: null,
        status: "[0,0,0,3]",
        statusStr: "启动怠速,油路通,电路通(GPS定位)",
        baseStation: null,
        alarm: "无",
        speed: 0,
        direction: 301,
        directionStr: "西偏北 59 度",
        gpsTime: "2024-09-03 11:22:29",
        updateTime: "2024-09-03 11:22:30",
        stopTime: "0",
        companyGroupId: null,
        position: true
      }
    ],
    mileage: 90248
  }
  const addressPoints = [
    [28.234863, 112.944946, "长沙市"],
    [28.243103, 113.078156, "长沙县"],
    [28.109894, 112.988892, "天心区"],
    [28.361206, 112.81311, "望城区"],
    [28.185425, 113.032837, "芙蓉区"],
    [28.144226, 112.792511, "莲花镇"],
    [27.564697, 109.868774, "公坪镇"],
    [27.438354, 109.692993, "芷江侗族自治县"],
    [27.438354, 109.945679, "中方县"],
    [27.351837, 109.169769, "新晃侗族自治县"],
    [27.340851, 109.89212, "怀化市桐木镇"],
    [27.342224, 110.166779, "怀化市安江镇"],
    [27.634735, 110.120087, "怀化市芦阳镇"],
    [27.191162, 109.841309, "洪江市"],
    [26.872559, 109.736938, "会同县"],
    [27.905273, 110.582886, "溆浦县"],
    [30.596924, 114.299011, "武汉市"],
    [30.493927, 114.341583, "洪山区"],
    [30.371704, 114.318237, "江夏区"],
    [30.577698, 114.025726, "蔡甸区"],
    [30.528259, 114.728851, "华容区"],
    [23.127594, 113.262177, "广州市"],
    [23.102875, 113.457184, "广州市黄埔区"],
    [23.082275, 113.314362, "广州市海珠区"],
    [23.019104, 113.119354, "佛山市"],
    [29.53125, 106.556396, "重庆市"],
    [29.262085, 106.254272, "重庆市江津区"],
    [29.827881, 107.094727, "重庆市长寿区"],
    [31.230011, 121.473083, "上海市"],
    [31.216278, 121.540375, "上海市浦东新区"],
    [31.106415, 121.3797, "闵行区"],
    [31.368713, 121.264343, "宝山区"],
    [31.214905, 121.420898, "长宁区"],
    [30.912781, 121.47308, "奉贤区"],
    [30.739746, 121.338501, "金山区"],
    [31.25473, 121.525269, "杨浦区"],
    [31.144867, 121.127014, "青浦区"],
    [31.37146, 121.26297, "嘉定区"],
    [31.613159, 121.396179, "崇明区"],
    [31.199799, 121.304169, "新虹街道"],
    [31.030884, 121.131134, "小昆山镇"],
    [34.263611, 108.941803, "西安市"],
    [34.325409, 108.70285, "咸阳市"],
    [34.153748, 108.901978, "长安区"],
    [34.104309, 108.601227, "石井镇"],
    [34.113922, 109.224701, "前卫镇"],
    [34.367981, 109.209595, "临潼区"],
    [25.040588, 102.716675, "昆明市"],
    [25.518494, 102.403564, "武定县"],
    [26.647339, 106.644287, "贵阳市"],
    [27.685547, 106.929932, "遵义市"],
    [22.807617, 108.374634, "南宁市"],
    [22.631836, 110.181885, "玉林市"],
    [22.727966, 108.349915, "良庆区"],
    [26.06781, 119.295044, "福州市"],
    [25.438843, 119.006653, "莆田市"],
    [30.19043, 120.19043, "杭州市"],
    [36.5625, 117.04834, "济南市"],
    [31.904297, 118.762207, "南京市"],
    [34.672852, 113.686523, "郑州市"],
    [38.38623, 106.21582, "银川市"],
    [28.630371, 115.927734, "南昌市"],
    [37.858887, 112.565918, "太原市"],
    [35.925293, 103.842773, "兰州"],
    [37.902832, 114.587402, "石家庄市"],
    [39.001465, 117.246094, "天津市"],
    [36.540527, 101.799316, "西宁市"],
    [29.608154, 91.131592, "拉萨市"],
    [43.747559, 87.60498, "乌鲁木齐市"],
    [39.550781, 116.367188, "北京市"]
  ]
  const lnglats = [
    { "B": "23.1", "L": "113.3", "PName": "1111", "Status": 1 },
    { "B": "23.2", "L": "113.4", "PName": "2222", "Status": 1 },
    { "B": "23.9", "L": "114.1", "PName": "3333", "Status": 3004 },
    { "B": "24.7", "L": "114.8", "PName": "第四个点", "Status": 1 },
    { "B": "24.8", "L": "115.5", "PName": "第五个点", "Status": 1 },
    { "B": "25.3", "L": "116.2", "PName": "第六个点", "Status": 1 },
    { "B": "26.1", "L": "116.7", "PName": "7777", "Status": 1 },
    { "B": "27.5", "L": "117.3", "PName": "8888", "Status": 1 }];
  //这是页面需要的数据。实际应用中常用ajax获取。坐标点状态。点的类型。点的名字。
  // const markers = [
  //   {
  //     position: [116.397428, 39.90923],
  //     title: '点位1'
  //   },
  //   {
  //     position: [116.48823, 39.98923],
  //     title: '点位2'
  //   }
  //   // 添加更多点位
  // ];

  const latlngs = [
    [45.51, -122.68],
    [37.77, -122.43],
    [34.04, -118.2]
  ];

  useEffect(() => {
    setTimeout(() => {
      intiMap();
    }, 5000);
  }, []);

  const addLayer = (map) => {
    let mapTypes = ["vec_w", "cva_w"]; // 矢量&标记
    let layers = []; //天地图图层
    mapTypes.forEach((item) => {
      let layerUrl = `http://t0.tianditu.gov.cn/DataServer?T=${item}&x={x}&y={y}&l={z}&tk=${key}`;
      let layer = L.tileLayer(layerUrl, {});
      layers.push(layer);
    });
    let layerGroup = L.layerGroup(layers).addTo(map);
  };

  const intiMap = () => {
    // 初始化地图
    const map = L.map("mapDiv", {
      crs: L.CRS.EPSG3857,
      center: [39.916578, 116.403653], // 设置中心点（例如北京）
      zoom: 18, // 设置缩放级别
      minZoom: 2,
      maxZoom: 12, // 最大缩放级别
      attributionControl: true, // 隐藏属性说明控件
      draggable: true, // 允许拖动地图
      keyboard: true, // 允许键盘操作地图
      inertia: true, // 启用��性��动
      scrollWheelZoom: true, // 启用��标滚轮缩放
      zoomControl: true, // 显示缩放控件
      doubleClickZoom: true, // 启用双击缩放
      tap: true, // 启用点击事件
      touchZoom: true, // 启用触摸缩放
    });


    // L.marker([116.411794, 39.9068]).addTo(map) //没有图标的标记
    // L.marker([51.5, -0.09], { icon: '../../assets/img/leaf-green.png' }).addTo(map);
    // 创建标记，并添加到地图上
    L.marker([39.916578, 116.403653], {
      icon: L.icon({
        iconUrl: leafGreen, //请求图标图片的URL
        iconSize: new L.Point(30, 30), //图标可视区域的大小。
        iconAnchor: new L.Point(30, 30) //图标的定位锚点

        // iconUrl: marker, tooltipAnchor: [0, -36], iconAnchor: [24, 48]
        // iconUrl: '../../assets/img/leaf-green.png',
        // iconUrl:'../../assets/img/leaf-green.png',
        // iconSize: [38, 100],
        // iconAnchor: [22, 94],
        // popupAnchor: [-3, -76],
        // shadowUrl: 'path/to/the/shadow.png',
        // shadowSize: [68, 95],
        // shadowAnchor: [22, 94]
      })
    }).addTo(map);

    addressPoints?.map((item) => {
      let marker = L.marker([item[0], item[1]], {
        icon: L.icon({
          iconUrl: ck,
          iconSize: [24, 28],
          iconAnchor: [12, 48],
          popupAnchor: [0, -36]
        })
      }).addTo(map);
      marker.bindPopup(`<p>${item[2]}</p>`);
    });
    // https://www.cnblogs.com/lisicn/p/14876060.html
    // https://blog.csdn.net/MingleHDU/article/details/133139455?spm=1001.2101.3001.6650.13&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-13-133139455-blog-141261238.235%5Ev43%5Epc_blog_bottom_relevance_base6&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-13-133139455-blog-141261238.235%5Ev43%5Epc_blog_bottom_relevance_base6&utm_relevant_index=18
    // https://gitcode.csdn.net/66ca0255aa1c2020b3598c99.html?dp_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6MjU4MzgsImV4cCI6MTczMzgyNTAzMywiaWF0IjoxNzMzMjIwMjMzLCJ1c2VybmFtZSI6ImVtYmFycmFzc2VkcyJ9.OstiEggUWOR60jORRG9W1yoxEFCUmZRV0cOWk4ygYpI&spm=1001.2101.3001.6650.14&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Eactivity-14-115934966-blog-141261238.235%5Ev43%5Epc_blog_bottom_relevance_base6&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Eactivity-14-115934966-blog-141261238.235%5Ev43%5Epc_blog_bottom_relevance_base6&utm_relevant_index=19
    // https://gitcode.csdn.net/66ca16a9aa1c2020b359cec3.html?dp_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6MjU4MzgsImV4cCI6MTczMzgyNTAzMywiaWF0IjoxNzMzMjIwMjMzLCJ1c2VybmFtZSI6ImVtYmFycmFzc2VkcyJ9.OstiEggUWOR60jORRG9W1yoxEFCUmZRV0cOWk4ygYpI&spm=1001.2101.3001.6650.7&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Eactivity-7-135914855-blog-141261238.235%5Ev43%5Epc_blog_bottom_relevance_base6&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Eactivity-7-135914855-blog-141261238.235%5Ev43%5Epc_blog_bottom_relevance_base6&utm_relevant_index=12
    // https://blog.csdn.net/dadadazhuang/article/details/141261238
    // https://blog.csdn.net/liusaint1992/article/details/48947249?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-0-48947249-blog-135914855.235^v43^pc_blog_bottom_relevance_base6&spm=1001.2101.3001.4242.1&utm_relevant_index=3

    //标记点的文本标注
    // var position = new L.LngLat(39.716578, 116.403653)
    // var label = new L.Label({
    //   text: "文本内容", //文本标注的内容
    //   position: position, //文本标注的地理位置
    //   offset: new L.Point(-50, 20) //文本标注的位置偏移值
    // })
    // // map.addTo(label);
    // //创建标注对象
    // var marker = new L.Marker(new L.LngLat(39.916578, 116.403653));
    // // //向地图上添加标注
    // map.addOverLay(marker);
    // 线
    // const latlngs = [
    //   [45.51, -122.68],
    //   [37.77, -122.43],
    //   [34.04, -118.2]
    // ];

    // var polyline = L.polyline(latlngs, { color: 'red' }).addTo(map);

    // map.fitBounds(polyline.getBounds());
    // 正方形
    // var latlngs = [[37, -109.05], [41, -109.03], [41, -102.05], [37, -102.04]];

    // var polygon = L.polygon(latlngs, { color: 'red' }).addTo(map);

    // // 将地图放大到多边形的位置
    // map.fitBounds(polygon.getBounds());

    // 添加圆
    // L.circle([39.916578, 116.403653], {
    //   // 边框颜色
    //   color: "red",
    //   // 填充颜色
    //   fillColor: "#f03",
    //   // 填充的不透明度
    //   fillOpacity: 0.5,
    //   // 圆的半径，以米为单位
    //   radius: 1000000,
    // }).addTo(map);
    // 添加多边形
    // L.polygon([
    //   [38.8, 109],
    //   [37.9, 109.5],
    //   [36.0, 109.2],
    // ]).addTo(map);



    const arr = [
      [34.153748, 108.901978],
      [22.7843651, 113.49106],
      [39.550781, 116.367188],
      [37.7749, -122.4194], // 例：San Francisco
      [40.7128, -74.0060], // 例：New York
      [43.6510, -79.3820] // 例：Toronto
    ]
    // 轨迹路线装饰
    const polyline = L.polyline(arr, {
      weight: 8,
    
      opacity: 0.5,
      smoothFactor: 3, // 平滑度
    }).addTo(map);
    //实时轨迹线
    const realRouteLine = L.polyline([],{
      weight: 8,
      color: '#ff9900',
    })
    // 使用L.polylineDecorator 轨迹方向箭头
    L.polylineDecorator(polyline, {
      patterns: [
        {
          offset: 10,
          repeat: 50,
          // symbol: L.symbol({
          //   pixelSize: 10,
          //   polygon: true,
          //   pathOptions: {
          //     fillColor: 'red',
          //   }
          // })
          symbol: L.Symbol.arrowHead({
            pixelSize: 5,
            headAngle:105,
            polygon: false,
            pathOptions: {
              fillColor: '#fff',
              weight: 1,
              // stroke: true,
            }

          })
        }
      ]
    }).addTo(map);



    const iconPng = L.icon({
      iconSize: [27, 54],//shipIconActive.png
      iconUrl: new URL(shipIconActive, import.meta.url).href,
      iconAnchor: [0.5, 1]
    })

    arr.forEach(function (latlng) {
      L.marker(latlng, { icon: iconPng }).addTo(map);
    });







    // 创建一条折线来表示水流动态
    // var latlngs = [
    //   [51.509, -0.08],
    //   [51.51, -0.06],
    //   [51.512, -0.04],
    //   // ... 更多点来描绘水流动路径
    // ];
    // var polylines = L.polyline(latlngs, { color: 'blue' }).addTo(map);

    // 应用SnakeAnim插件来实现水流动画效果
    // polylines.snakeAnim({
    //   duration: 4000,     // 动画持续时间（毫秒）
    //   delay: 100,         // 每个节点之间的动画延迟时间（毫秒）
    //   // ease: Linear.easeNone, // 动画缓动函数
    //   // 更多选项可以根据需要进行配置
    // });



// 聚合物没有出现有bug
    const markers = L.markerClusterGroup();
    console.log(addressPoints, "-------")
    for (var i = 0; i < addressPoints.length; i++) {
      var a = addressPoints[i];
      var title = a[2];
      var marker = L.marker(new L.LatLng(a[0], a[1]), { title: title });
      marker.bindPopup(title);// //绑定点击弹窗事件
      markers.addLayer(marker);//   //将点marker添加进markerCluserGroup
    }

     map.addLayer(marker);

    const data = [
      [34.153748, 108.901978],
      [51.51, -0.1],
      [39.550781, 116.367188]
    ]
    const peopleIcon = L.icon({
      iconUrl: leafGreen, // 替换为你自己的标记图标路径 './image/img.png'
      iconSize: [25, 41],  //图片大小
      iconAnchor: [25, 70]  //图片位置
    })
    // console.log(L.animatedMarker(),"------------")
    setInterval(() => {
      var marker = L.animatedMarker(data, {
        autoStart: true,
        distance: 1000, // 运动轨迹的总距离，单位为像素
        interval: 10000, // 每帧之间的时间间隔，单位为毫秒
        icon: peopleIcon,
        onEnd: function () {
          //移动结束后移除
          // map.removeLayer();
        }
      }).addTo(map);
    }, 2000)




// 轨迹
    // var myIcon = L.icon({
    //   iconUrl: 'shipIconActive', // 图标图片的URL
    //   iconSize: [18, 15], // 图标的大小
    //   iconAnchor: [22, 94], // 图标的锚点，对应图标的位置
    //   popupAnchor: [-3, -6] // 弹出窗口的锚点
    // });

    // 模拟轨迹的坐标数组
    // var latlngs2 = [
    //   [37.7749, -122.4194], // 例：San Francisco
    //   [40.7128, -74.0060], // 例：New York
    //   [43.6510, -79.3820] // 例：Toronto
    // ];

    // 创建一个轨迹
    // var polyline3 = L.polyline(latlngs2, { color: 'red' }).addTo(map);

    // 在轨迹上的每个点加上图标
    // latlngs2.forEach(function (latlng) {
    //   L.marker(latlng, { icon: myIcon }).addTo(map);
    // });








// 播放器
    let track = null
    let popup = null
    //模拟一段轨迹数据
    let path = data.listCheck

    // 起点
    L.marker([27.564697, 109.868774], {
      icon: L.icon({
        iconUrl: new URL(start, import.meta.url).href,
        iconSize: [23, 30]
      })
    }).addTo(map)
    // 终点
    L.marker([30.528259, 114.728851], {
      icon: L.icon({
        iconUrl: new URL(end, import.meta.url).href,
        iconSize: [23, 30]
      })
    }).addTo(map)

    // 定义沿着轨迹移动的Icon
    let markerIcon = L.icon({
      iconSize: [27, 54],//shipIconActive.png
      iconUrl: new URL(shipIconActive, import.meta.url).href,
      iconAnchor: [13.5, 27]
    })



    //定义沿着轨迹移动的marker
    let markerIcon1 = L.icon({
      iconSize: [67, 54],
      iconUrl: new URL(shipIconActive, import.meta.url).href,
      iconAnchor: [13.5, 27],
    });
    //创建播放器对象并添加至地图
    let track1 = new L.TrackPlayer(path1, { markerIcon1, }).addTo(map);
    //地图设置到合适的缩放级别
    map.setZoom(17, { animate: false });
    //开始播放
    track1.start();


    // 创建播放器对象并添加至地图
    // track = new L.TrackPlayer(
    //   path,
    //   // 轨迹配置，都可以不要，保留markerIcon一个就可以了
    //   {
    //     markerIcon,
    //     // speed: 500, // 播放速度
    //     // weight: 10, // 轨迹线宽度
    //     // passedLineColor: '#f2cac9', // 已行驶轨迹部分的颜色
    //     // notPassedLineColor: 'blue', // 未行驶轨迹部分的颜色
    //     panTo: true, // 地图跟随移动
    //     // 轨迹箭头样式
    //     // polylineDecoratorOptions: {
    //     //   patterns: [
    //     //     /**
    //     //      * offset 第一个图案符号的偏移量，从线的起点开始。默认值：0
    //     //      * endOffset 最后一个图案符号的最小偏移量，从线的端点开始。默认值：0
    //     //      * repeat 重复间隔。定义每个连续符号的锚点之间的距离
    //     //      * symbol 图标样式
    //     //      * */
    //     //     {
    //     //       offset: 0,
    //     //       repeat: 20,
    //     //       symbol: L.Symbol.arrowHead({
    //     //         pixelSize: 10,
    //     //         pathOptions: { color: 'red', weight: 1, stroke: true }
    //     //       })
    //     //     }
    //     //   ]
    //     // },
    //     markerRotation: false // 是否开启marker的旋转
    //   }
    // ).addTo(map)




    addLayer(map);
  };
  // 地图实现轨迹回放
  // https://blog.csdn.net/qing12313359/article/details/141901445
  return (
    <div
      id="mapDiv"
      ref={mapRef}
      style={{ height: "83.6vh", width: "85.6%", position: "absolute" }}
    />
  );
}